import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { intl } from '../../../intl/intl'

import themeHOC from '../../common/themeHOC'

import Position from './Position'
import CurrentOrder from './CurrentOrder'
import HistoryOrder from './HistoryOrder'

import {
  TAB_TYPE_CURRENT_POSITION, TAB_TYPE_CURRENT_ORDER,
  TAB_TYPE_HISTORY_ORDER, TAB_TYPE_ALL_POSITION,
  setDataQueryType
} from '../../../redux/actions/tradeDataQueryAction'

import './data-query.less'

@connect((state) => {
  return {
    currentDataQueryType: state.trade.dataQuery.get('currentDataQueryType')
  }
}, (dispatch) => {
  return bindActionCreators({
    setDataQueryType
  }, dispatch)
})
@themeHOC
class DataQuery extends Component {
  renderContent () {
    const { currentDataQueryType } = this.props
    switch (currentDataQueryType) {
      case TAB_TYPE_CURRENT_POSITION: return <Position type="current"/>
      case TAB_TYPE_CURRENT_ORDER: return <CurrentOrder/>
      case TAB_TYPE_HISTORY_ORDER: return <HistoryOrder/>
      case TAB_TYPE_ALL_POSITION: return <Position/>
    }
  }

  render () {
    const { theme, currentDataQueryType, setDataQueryType } = this.props
    return (
      <div className={`trade-column-bottom trade-data-query-${theme}`}>
        <div className="trade-column-content-title">
          {
            [
              TAB_TYPE_CURRENT_POSITION, TAB_TYPE_CURRENT_ORDER,
              TAB_TYPE_HISTORY_ORDER, TAB_TYPE_ALL_POSITION
            ].map(key => {
              return (
                <span
                  key={key}
                  datatype={currentDataQueryType === key ? 'selected' : ''}
                  className="trade-column-content-title-tab"
                  onClick={() => { setDataQueryType(key) }}>
                  {intl(key)}
                </span>
              )
            })
          }
        </div>
        {this.renderContent()}
      </div>
    )
  }
}

export default DataQuery
